<template>
  <div class="header_container">
    <div class="header_img"></div>
		<div class="header_search">
				<div>
					<input type="text" placeholder="搜索  商品名称" v-model="keywords"/>
          <el-button icon="el-icon-search" @click="postSearch"></el-button>
				</div>
				<p>
					<a>家庭囤货日</a>
					<a>海量福利</a>
					<a>iPad Air</a>
					<a>京东京造</a>
					<a>Magic4</a>
					<a>出游季</a>
					<a>大牌空调</a>
					<a>品质家具</a>
					<a>数码相机</a>
				</p>
		</div>
		<div class="shopping_bag">
			<a @mouseenter="showWindow"
			@click.prevent="goShopCar"><i class="el-icon-s-goods"></i>&nbsp;&nbsp;我的购物车</a>
		</div>
	</div>
</template>

<script>
  import { MessageBox } from 'element-ui'
  import {mapState} from 'vuex'
  import {mapActions} from 'vuex'

  export default {
    data(){
      return{
        keywords: '',
		showM:false,
      }
    },
    computed: {
      ...mapState(['userInfo'])
    },
	created(){
		this.$bus.$on('hideM',m=>{
			this.showM = m
		})
	},
    methods:{
		showWindow(){
			this.showM = !this.showM
			this.$bus.$emit('showWindow',this.showM)
		},
      goShopCar(){
        if(this.userInfo.id){
          this.$router.replace('/shopcar');
        }else{
          MessageBox({
            type: 'info',
            message: "请先登录!",
			showClose: true,
          });
        }
      },
      async postSearch(){
        if(this.keywords){
          let keywords = this.keywords;
          this.$store.dispatch('reqSearch',{keywords});
          this.$router.replace('/searchdetail');
        }
      },
    },
  }
</script>

<style scoped>
/*头部搜索区*/
.header_container{
	position: relative;
	width: 100%;
  height: 140px;
  margin: 0;
  padding: 0;
}
/*商城标识图片区域*/
.header_container>.header_img{
	position: absolute;
	left: 330px;
	margin-top: 10px;
}
.header_img{
        width: 190px;
        height: 120px;
        margin: 10px 0;
        background-color: azure;
        background-image: url("../../common/img/sprite.png");
        background-position: 0 0;
        background-repeat: no-repeat;
        overflow: hidden;
        
    }
/*鼠标移入图片实现3d动画*/
.header_img:hover{
	transform-style: preserve-3d;
	transform:rotateY(360deg);
    transition: all 1500ms;
    -moz-transform-style: preserve-3d;
	-moz-transform:rotateY(45deg);
	-moz-transition: all 1500ms;
}
.header_search{
	position: absolute;
	left: 50%;
	margin-left: -290px;
	margin-top: 50px;
}
.header_search div{
  display: flex;
  align-items: center;
}
.header_search input{
	padding-left: 10px;
	width: 490px;
	height: 35px;
	font-size: 14px;
	line-height: 35px;
	border-radius: 0;
	border: 2px solid #e2231a;
   border-right: none;
	outline: none;
}
.header_search button{
        width: 60px;
        height: 35px;
		font-size: 18px;
        border: none;
		outline: none;
        background-color: #e1251b;
}
.el-button{
	border-radius: 0;
	display: flex;
  	justify-content: center;
  	align-items: center;
	  color: #fff;
}
.header_search>p>a{
	display: inline-block;
	padding: 5px;
	font-size: 12px;
	color: #999;
	cursor: pointer;
}
.header_search>p>a:nth-child(1){
	color: #e1251b;
}
.header_search>p>a:hover{
	color: #e1251b;
}
/*头部的购物车标记区域*/
.header_container>.shopping_bag{
	position: absolute;
	margin-top: 60px;
	right: 420px;
	width: 130px;
	height: 34px;
	text-align: center;
	line-height: 34px;
	font-size: 12px;
	background: #fff;
	border:1px solid #e3e4e5;
	cursor: pointer;
}
.el-icon-s-goods{
	font-size: 15px;
}
.shopping_bag{
	color: #c81623;
}
.shopping_bag:hover{
	border-color:#c81623;

}
</style>
